<template>
  <div>
    <div class="bf">
      <router-link to="/my" tag="span" class="shang">&lt;返回</router-link>
      <p>不凡</p>
    </div>
    <div class="gray"></div>
    <p class="my">我的收藏</p>

    <div class="content">
      <ul>
        <li v-for="item in collectGoodsList" :key="item.id">
          <img :src="item.list_pic_url" alt="000" />
          <p>{{ item.name }}</p>
          <p>¥{{ item.retail_price }}</p>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { my } from "@/api/my/index.js";
export default {
  data() {
    return {
      data: [],
      collectGoodsList: []
    };
  },
  computed: {},
  created() {
    my({
      openId: "1231"
    }).then(res => {
      console.log(res);
      console.log(res.collectGoodsList);
      this.collectGoodsList = res.collectGoodsList;
    });
  },
  mounted() {},
  methods: {}
};
</script>

<style scoped lang="scss">
.bf p {
  font-size: 14px;
  color: brown;
}
a {
  text-decoration: none;
  color: brown;
  font-size: 14px;
  position: absolute;
  left: 20px;
  top: 20px;
}
.span {
  color: brown;
  margin-left: 20px;
}
.shang {
  display: flex;
  flex-direction: column;
  position: absolute;
  color: brown;
  top: 15px;
  left: 30px;
}
.gray {
  width: 100%;
  height: 2px;
  background-color: #f5f5f5;
}
.my {
  font-size: 20px;
  color: black;
  font-weight: bolder;
  margin-top: 10px;
}
.content {
  width: 100%;
  height: 1500px;
  background-color: #f5f5f5;
}
.content li {
  width: 180px;
  height: 260px;

  float: left;
  background-color: #fff;
  margin-right: 7.5px;
  margin-top: 5px;
}
.content img {
  width: 130px;
  height: 130px;
}
</style>